<template>
	<view>
		<view class="zxsFilter">
			<template v-if="currRole == 'stu'">
				<view class="zxsFilterItem">
					<view class="filterTit">学科</view>
					<view class="filterList">
						<view class="item"
							:class="[subIndex == index ? 'active' : '']"
							v-for="(item,index) in subArr"
							:key="index"
							@tap="selectCurrSub(index,item)"
						>{{item.subjectName}}</view>
					</view>
				</view>
			</template>
			<template v-else-if="currRole == 'tea'">
				<view class="zxsFilterItem">
					<view class="filterTit">选择班级</view>
					<template v-if="clsList != ''">
						<scroll-view class="filterListCls clearfix" scroll-y>
							<view class="itemCls"
								:class="[clsIndex == index ? 'active' : '']"
								v-for="(item,index) in clsList"
								:key="index"
								@tap="selectCls(index,item)"
							>
								<view class="cls">{{item.levelD}}班</view>
								<view class="grade">{{item.levelC}}</view>
							</view>
						</scroll-view>
					</template>
					<template v-else>
						<view class="tipTxt">暂无班级</view>
					</template>
				</view>
				<view class="zxsFilterItem">
					<view class="filterTit">选择学科</view>
					<view class="tipTxt" v-if="subDataNum == -1">请选择班级</view>
					<view class="tipTxt" v-if="subDataNum == 0">请去设置学科</view>
					<template v-if="subDataNum == 1">
						<view class="filterList">
							<view class="item"
								:class="[subIndex == index ? 'active' : '']"
								v-for="(item,index) in subListQt"
								:key="index"
								@tap="selectCurrSub(index,item)"
							>{{item.subName}}</view>
						</view>
					</template>
				</view>
				<view class="zxsFilterItem">
					<view class="filterTit spaceBet">
						选择学生
					</view>
					<view class="tipTxt" v-if="stuDataNum == -1">请选择班级</view>
					<view class="tipTxt" v-if="stuDataNum == 0">暂无学生</view>
					<template v-if="stuDataNum == 1">
						<view class="stusItem spaceBet" @tap="switchStu">
							<view class="stuName">{{stuName}}</view>
							<view class="iconfont icon-switch"></view>
						</view>
					</template>
				</view>
			</template>
			<template v-else-if="currRole == 'jz'">
				<view class="zxsFilterItem">
					<view class="filterTit">选择孩子</view>
					<view class="tipTxt" v-if="childDataNum == 0">暂无孩子,请去绑定</view>
					<view class="filterListCls clearfix" v-if="childDataNum == 1">
						<view class="itemChild"
							:class="[clsIndex == index ? 'active' : '']"
							v-for="(item,index) in childList"
							:key="index"
							@tap="selectChild(index,item)"
						>
							<view class="cls">{{item.stuRealName}}</view>
						</view>
					</view>
				</view>
				<view class="zxsFilterItem">
					<view class="filterTit">选择学科</view>
					<view class="tipTxt" v-if="subDataNum == -1">请选择孩子</view>
					<view class="tipTxt" v-if="subDataNum == 0">请去设置学科</view>
					<template v-if="subDataNum == 1">
						<view class="filterList">
							<view class="item"
								:class="[subIndex == index ? 'active' : '']"
								v-for="(item,index) in subListQt"
								:key="index"
								@tap="selectCurrSub(index,item)"
							>{{item.subjectName}}</view>
						</view>
					</template>
				</view>
			</template>
			<view class="zxsFilterItem">
				<view class="filterTit">选择日期</view>
				<view class="listItem">
					<picker class="pickerView" mode="date" :value="startDate" fields="day" @change="bindDateChange" start="2010-01-01">
						<view>{{startDate}}</view>
					</picker>
				</view>
				<view class="tillTxt">至</view>
				<view class="listItem">
					<picker class="pickerView" mode="date" :value="endDate" fields="day" @change="bindDateChangeEnd" start="2010-01-01">
						<view>{{endDate}}</view>
					</picker>
				</view>
			</view>
			<view class="filterBtn noBorRad"  @tap="sureFilter">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currRole:String,
			subArr:Array,
			subIndex:Number,
			clsIndex:Number,
			startDate:String,
			endDate:String,
			clsList:Array,
			subDataNum:Number,
			subListQt:Array,
			currPage:{//老师身份下 具体学生列表统计 clsStuTj recordDet
				type:String,
				default:'recordDet'
			},
			stuDataNum:Number,
			stuName:String,
			childDataNum:Number,
			childList:Array
		},
		data(){
			return{
				currStuName:''
			}
		},
		watch:{
			stuName(newVal){
				if(this.currPage == 'clsStuTj'){
					this.currStuName = newVal;
				}
			}
		},
		mounted(){
			if(this.currPage == 'clsStuTj'){
				this.currStuName = this.stuName;
			}
		},
		methods:{
			getCurrStuName(){
				this.$emit('getCurrStuName',this.currStuName,'keyDown')
			},
			clearStuName(){
				this.currStuName = '';
				this.$emit('getCurrStuName',this.currStuName,'clear')
			},
			selectCurrSub(index,item){
				this.$emit('selectCurrSub',index,item);
			},
			bindDateChange(e){
				this.$emit('bindDateChange',e.detail.value);
			},
			bindDateChangeEnd(e){
				this.$emit('bindDateChangeEnd',e.detail.value);
			},
			sureFilter(){
				this.$emit('sureFilter');
			},
			selectCls(index,item){
				this.$emit('selectCls',index,item);
			},
			switchStu(){
				this.$emit('switchStu');
			},
			selectChild(index,item){
				this.$emit('selectChild',index,item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zxsFilter {
		padding:0 20rpx;
		background: #fff;
		.filterBtn{
			width: 100%;
			@include respTo(phone){
				height:100rpx;
				line-height: 100rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				height:60rpx;
				line-height: 60rpx;
				font-size: $padSize20;
			}
			position: fixed;
			left: 0;
			bottom: 0;
			background: $pss-color-primary_1;
			color: #fff;
			text-align: center;
		}
		.filterTit{
			color: $pss-text-color3;
			font-weight: bold;
			@include respTo(phone){
				height: 80rpx;
				line-height: 80rpx;
				font-size: $font-size32;
			}
			@include respTo(pad){
				height: 60rpx;
				line-height: 60rpx;
				font-size: $padSize20;
			}
			.icon-error{
				font-weight: normal;
				font-size: 34rpx;
				color: $pss-color-red;
				height: 100%;
				padding-left: 50rpx;
			}
		}
		.tillTxt{
			color: $pss-text-colora;
			text-align: center;
			@include respTo(phone){
				margin: 30rpx 0 -10rpx;
				font-size: $font-size32;
			}
			@include respTo(pad){
				margin: 20rpx 0 -10rpx;
				font-size: $padSize18;
			}
		}
		.pickerView{
			width: 100%;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
			color: $pss-text-color3;
			@include respTo(phone){
				height: 80rpx;
				line-height: 80rpx;
				font-size: $font-size32;
			}
			@include respTo(pad){
				height: 60rpx;
				line-height: 60rpx;
				font-size: $padSize18;
			}
		}
		.tipTxt{
			padding: 20rpx 0;
			color: $pss-text-colora;
			@include respTo(phone){
				font-size: $font-size28;
			}
			@include respTo(pad){
				font-size: $padSize16;
			}
		}
		.stusItem{
			@include respTo(phone){
				height: 80rpx;
				font-size: $font-size28;
			}
			@include respTo(pad){
				height: 50rpx;
				font-size: $padSize18;
			}
			align-items: center;
			border-bottom: 1rpx solid #eee;
			.stuName{
				color: #ffa510;
			}
			.icon-switch{
				@include respTo(phone){
					font-size: 38rpx;
				}
				@include respTo(pad){
					font-size: $padSize18;
				}
				color: $pss-text-colora;
			}
		}
		.filterListCls{
			max-height: 520rpx;
			overflow: hidden;
			.itemCls,
			.itemChild{
				width: 48%;
				text-align: center;
				background: #f4f4f4;
				float: left;
				border-radius: 6rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.cls{
					margin-bottom: 5rpx;
					color: $pss-text-color3;
					@include respTo(phone){
						font-size: $font-size30;
					}
					@include respTo(pad){
						font-size: $padSize18;
					}
				}
				.grade{
					color: $pss-text-color8;
					@include respTo(phone){
						font-size: $font-size26;
					}
					@include respTo(pad){
						font-size: $padSize16;
					}
				}
				&:nth-of-type(2n){
					float: right;
				}
				&.active{
					background: #ffa510;
					.cls,.grade,.leader{
						color: #fff;
					}
				}
			}
			.itemCls{
				height: 85rpx;
			}
			.itemChild{
				@include respTo(phone){
					height: 130rpx;
				}
				@include respTo(pad){
					height: 70rpx;
				}
			}
		}
		.filterList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: 32%;
				@include respTo(phone){
					height: 66rpx;
					line-height: 66rpx; 
					font-size: $font-size28;
				}
				@include respTo(pad){
					height: 42rpx;
					line-height: 42rpx;
					font-size: $padSize16;
				}
				border-radius: 50rpx;
				text-align: center;
				flex-shrink: 0;
				color: $pss-text-color8; 
				background: #f4f4f4;
				margin-bottom: 20rpx;
				&.active{
					color: #fff;
					background: #ffa510;
				}
			}
			&:after{
				content: '';
				display: block;
				width: 32%;
				height: 66rpx;
			}
		}
	}
</style>